{% extends 'web/layout/basic.html' %}
{% load static %}

{% block title %} 用户短信登录 {% endblock %}


{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="account">
        <div class="title">用户短信登录</div>
        <form id="smsForm" method="POST" novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="row">
                            <div class="col-xs-7">
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                            <div class="col-xs-5">
                                <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}
            <div>
                <div style="float: right;">
                    <a href="{% url 'web:login_user_pwd' %}">用户名密码登录?</a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <input id="btnSubmit" type="button" class="btn btn-primary" value="登  录"/>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>

        $(function () {
           //页面框架加载完成的时候会执行该方法
           bindClickSendSms();
           bindClickSubmit();
        });

        //绑定点击登录的方法
        function bindClickSubmit() {
            $("#btnSubmit").click(function () {
               $(".error-msg").empty();
               $.ajax({
                   url:'{% url "web:login_sms" %}',
                   type:'post',
                   data:$("#smsForm").serialize(),
                   dataType:'json',
                   success:function (res) {
                       if(res.status){

                           location.href=res.data;
                       }else{
                           $.each(res.error,function (key,value) {
                               $("#id_"+key).next().text(value[0]);
                           })
                       }
                   }
               });
            });
        };

        //绑定点击发送短信后触发的方法
        function bindClickSendSms() {

            $("#btnSms").click(function () {
                $('.error-msg').empty();
                let mobile_phone=$("#id_mobile_phone").val();
                let tpl='login';
                $.ajax({
                   url:"{% url 'web:sms_send' %}",
                   type:'get',
                   data:{mobile_phone,tpl},
                   dataType:'json',
                   success:function (res) {
                       if(res.status){
                           //如果短信发送成功，调用倒计时的方法
                            sendSmsRemind();
                       }else{
                           $.each(res.error,function (key,value) {
                               $("#id_"+key).next().text(value[0]);

                           })
                       }
                   }

                });
            })
        };
        function sendSmsRemind() {
            let btn=$("#btnSms");
            btn.prop('disabled',true);
            let timer=60;
            let temp=setInterval(function () {
                timer-=1;
                if(timer<1){
                    btn.val('点击发送验证码').prop('disabled',false);
                    clearInterval(temp);
                }
            },1000)
        }
    </script>

{% endblock %}